import React, { Component } from 'react';
import './6css.css'
const data = [
    {
        label: '线上活动',
        name: '线上活动',
        checked: true
    },
    {
        label: '推广类',
        name: '推广类',
        checked: false
    },
    {
        label: '线下活动',
        name: '线下活动',
        checked: false
    },
    {
        label: '品牌介绍',
        name: '品牌介绍',
        checked: false
    }
]
class FromInput extends Component {
    state = {
        title: '前端前景技术发展交流',
        tel: '',//电话
        job: '',//职业
        sex: '1',//性别 男
        desc: '',//描述
        city:'beijing',
        show:false
    }

    updateTel = (e) => {
        // console.log(e);
        this.setState({
            tel: e.target.value
        })
    }
    updateJob = (e) => {
        this.setState({
            job: e.target.value
        })
    }
    // 城市
    updateCity=(e)=>{
        this.setState({
            city:e.target.value
        })
    }
    // 允许电话沟通
    switch=(e)=>{
        this.setState({
            show:e
        })
    }
    // 活动类型
    handleInput = (e, index) => {
        // console.log(e.target.type);
        if (e.target.type=== 'checkbox') {
            data[index].checked = !data[index].checked
        }
        let name = e.target.name
        let value = e.target.value
        this.setState({
            [name]: value
        })
        console.log('checkbox', data, this.state)  
    }
    // 性别
    updateSex = (e) => {
        this.setState({
            sex: e.target.value
        })
    }
    // 描述
    updateDesc = (e) => {
        this.setState({
            desc: e.target.value
        })
    }
    // 提交
    submitData=(e)=>{
        e.preventDefault()
        // const {title,tel,job,sex,city,desc}=this.state
        console.log(this.state);
    }
    render() {
        return (<div className='form'>
            <form  onSubmit={this.submitData}>
                <h2>6.表单组件</h2>
                {/* 活动名称 */}
                活动名称：<input type="text" name="" id="" value={this.state.title} readOnly />
                <br />
                城市:<select value={this.state.city} onChange={this.updateCity}>
                    <option value="beijing">北京</option>
                    <option value="hebei">河北</option>
                    <option value="shandong">山东</option>
                </select>
                <br />
                报名电话 <input type="text" value={this.state.tel} onChange={this.updateTel} />
                <br />
                <div className='switch'>
                    <span className='spaqw'>允许电话沟通</span>
                    <div className="testswitch">
                        <input className="testswitch-checkbox" id="onoffswitch" type="checkbox" value={this.state.show} onChange={() => this.switch(!this.state.show)} />
                        <label className="testswitch-label" htmlFor="onoffswitch" >
                            <span className="testswitch-inner" data-on="ON" data-off="OFF"></span>
                            <span className="testswitch-switch"></span>
                        </label>
                    </div>
                </div>
                {/* <switch></switch> */}
                <br />
                目前职业：<input type="text" value={this.state.job} onChange={this.updateJob} />
                <br />
                活动类型 :{
                    data.map((item, key) => {
                        return (
                            <label key={key}>
                                <input type="checkbox" name={item.name} checked={item.checked} onChange={(e) => this.handleInput(e, key)} />{item.label}
                            </label>
                        )
                    })
                }
                <br />
                {/* 活动赞助商 */}
                活动赞助商:
                <label>
                    <input type="radio" value='1' checked={this.state.sex === '1'} onChange={this.updateSex} />淘宝
                </label>
                <label>
                    <input type="radio" value='2' checked={this.state.sex === '2'} onChange={this.updateSex} />京东
                </label>
                <br />
                {/* 描述 */}
                描述
                <textarea name="" id="" cols="30" rows="10" value={this.state.desc} onChange={this.updateDesc}></textarea>
                <br />
                {/* 按钮 */}
                <div className='btn'>
                    <button className='submit' onClick={this.submitData}>提交</button>
                    <button className='reset'>重置</button>
                </div>

            </form>
        </div>);
    }
}

export default FromInput; 